<template>
  <div class="app-container">
    <el-alert
      :title="alert"
      type="info"
      effect="dark"
    >
    </el-alert>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;margin:20px 0 0 0"
    >
      <el-table-column
        align="center"
        label="ID"
        width="80"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="180px"
        align="center"
        label="发表日期"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="180px"
        align="center"
        label="修改日期"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.modifyTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="120px"
        align="center"
        label="作者"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="状态"
        width="110"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.isSale | statusFilter">
            {{ row.isSale==1?'发布':'草稿' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="分类"
        width="110"
      >
        <template slot-scope="{row}">

          <el-tag @click="handleTag(row)">
            {{ row.ctitle }}
          </el-tag>

        </template>
      </el-table-column>
      <el-table-column
        min-width="300px"
        label="标题"
      >
        <template slot-scope="{row}">
          <router-link
            :to="'/example/edit/'+row.id"
            class="link-type"
          >
            <span>{{ row.title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <router-link :to="'/example/edit/'+scope.row.id">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
            >
              编辑
            </el-button>
          </router-link>
          <el-button
            type="danger"
            size="small"
            @click="del(scope.row.id)"
            style="margin-left:10px"
            icon="el-icon-delete"
          >
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :show-close="false"
      :with-header="false"
      size="100%"
      direction="ttb"
    >
      <switch-classify
        :id="cid"
        v-if="drawer"
        :toid="cids"
        @on-ok="drawOk"
        @on-close="drawer=false"
      ></switch-classify>

    </el-drawer>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { fetchList, delArticle, createArticle } from "@/api/article";
import Pagination from "@/components/Pagination";
import SwitchClassify from "@/components/SwitchClassify";

export default {
  name: "ArticleList",
  components: { Pagination, SwitchClassify },
  filters: {
    statusFilter(status) {
      status = status == 1 ? "published" : "draft";
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      cid: "",
      cids: "",

      drawer: false,
      total: 0,
      alert: "点击分类可以切换分类",
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      }
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    drawOk(e) {
      console.log(e);
      createArticle(e).then(res => {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
        this.getList();
      });
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    handleTag(row) {
      this.drawer = true;
      this.cid = row.id;
      this.cids = row.cid;
      console.log(row);
    },
    del(id) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var data = {
            id,
            flag: 0
          };
          delArticle(data).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            if (this.list.length == 1) {
              this.listQuery.page > 1 && this.listQuery.page--;
            }
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        this.list = response.result.list;
        this.total = response.result.total;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
